import { View } from "@tarojs/components";
import { useEffect, useState } from "react";
import { AtTabs, AtTabsPane } from "taro-ui";
import OrderCard from "./components/OrderCard";
import "./index.scss";
import { getOrderList } from "../../api/order";
type propsType = {
  index: number;
};

type createOrderType = {
  ownder: number;
  allPrice: number;
  goodsList: GoodsListType[];
  addressId: number;
  remark: string;
};

type GoodsListType = {
  num: number;
  price: number;
  goodsId: number;
  stockId: number;
  goodsName: string;
  picture: string;
};

export default (props: propsType) => {
  const [current, SetCurrent] = useState<number>(0);
  const [orderList, SetOrderList] = useState<createOrderType[]>();
  useEffect(() => {
    if (props.index) {
      SetCurrent(props.index);
    }
    initData();
  }, []);

  const initData = () => {
    getOrderList().then(resp => {
      const list = [];
      resp.map(item => {
        item.goodsList = JSON.parse(item.goodsList);
        list.push(item);
      });
      SetOrderList(list);
    });
  };

  const handleClick = index => {
    SetCurrent(index);
  };

  return (
    <View>
      <AtTabs
        current={current}
        scroll
        tabList={[
          { title: "全部" },
          { title: "待付款" },
          { title: "待收获" },
          { title: "退款/售后" }
        ]}
        onClick={(index, _) => {
          handleClick(index);
        }}
      >
        <AtTabsPane current={current} index={0}>
          <View style="font-size:18px;text-align:center;height:100%;">
            <View>
              {orderList &&
                orderList.map(item => {
                  return <OrderCard {...item} initData={initData} />;
                })}
            </View>
          </View>
        </AtTabsPane>
        <AtTabsPane current={current} index={1}>
          <View style="font-size:18px;text-align:center;height:100%;">
            {orderList &&
              orderList
                .filter(item => item.orderStatus == 1)
                .map(item => {
                  return <OrderCard {...item} initData={initData} />;
                })}
          </View>
        </AtTabsPane>
        <AtTabsPane current={current} index={2}>
          <View style="font-size:18px;text-align:center;height:100%;">
            {orderList &&
              orderList
                .filter(item =>
                  [2, 3, 4, 5, 7, 8, 9, 11].includes(item.orderStatus)
                )
                .map(item => {
                  return <OrderCard {...item} initData={initData} />;
                })}
          </View>
        </AtTabsPane>
        <AtTabsPane current={current} index={3}>
          <View style="font-size:18px;text-align:center;height:100%;">
            {orderList &&
              orderList
                .filter(item => [10, 12, 6, 13].includes(item.orderStatus))
                .map(item => {
                  return <OrderCard {...item} initData={initData} />;
                })}
          </View>
        </AtTabsPane>
      </AtTabs>
    </View>
  );
};
